<template>
  <div class="main-template" transition="fade" v-bind:dataValue="showLoading">
    <div class="main-header">
      <div class="main-header-box">
        <yd-flexbox class="user-detial">
          <div class="user-pic">
            <img :src="resDatas.avatar.image" alt="">
          </div>
          <div class="user-desc">
            <p>姓名：{{resDatas.shr_info.name}}</p>
            <p>{{resDatas.user_name}}</p>
          </div>
        </yd-flexbox>
        <yd-flexbox-item class="main-header-bottom">
          <yd-flexbox>
            <yd-flexbox-item>
              <p>投资店铺</p>
              <p>{{resDatas.invset_count}}家</p>
            </yd-flexbox-item>
            <yd-flexbox-item>
              <p>投资金额</p>
              <p>{{resDatas.invset_amount}}元</p>
            </yd-flexbox-item>
            <yd-flexbox-item>
              <p>累计分红</p>
              <p>{{resDatas.share_amount}}元</p>
            </yd-flexbox-item>
            <yd-flexbox-item>
              <p>回报周期</p>
              <p>{{resDatas.payback_cycle}}天</p>
            </yd-flexbox-item>
            <yd-flexbox-item>
              <p>投资回报率</p>
              <p> {{resDatas.payback_percent}}%</p>
            </yd-flexbox-item>
          </yd-flexbox>
        </yd-flexbox-item>
      </div>
    </div>
    <div class="main-box">
      <yd-flexbox class="main-box-flex" v-if="dataList.length<=2">
        <yd-flexbox-item class="flex-box-item" v-for="(item,key) in dataList" v-bind:class="key==0?'active':''" @click.native="showItem($event,key,item)">{{item.name}}</yd-flexbox-item>
      </yd-flexbox>
      <yd-flexbox class="main-box-flex" v-else>
        <yd-flexbox-item v-bind:class="active">{{shopData.name}}</yd-flexbox-item>
        <yd-flexbox-item @click.native="showMoreStore(dataList)">更多</yd-flexbox-item>
      </yd-flexbox>
      <yd-grids-group :rows="2" title="今日收益">
        <yd-grids-item>
          <span slot="text">
          <div class="grids-icon"><icon name="area-chart" scale="1.5"></icon></div>
          <p>今日营业额{{shopData.todayList.total_amount}}元 </p>
          </span>
        </yd-grids-item>
        <yd-grids-item>
          <span slot="text">
         <div class="grids-icon"><icon name="bar-chart" scale="1.5"></icon></div>
          <p>今日毛利率{{shopData.todayList.total_percent}}% </p>
          </span>
        </yd-grids-item>
        <yd-grids-item>
          <span slot="text">
            <div class="grids-icon"><icon name="line-chart" scale="1.5"></icon></div>
             <p>本人持股数{{shopData.todayList.stock_right_percent}}% </p>
          </span>
        </yd-grids-item>
        <yd-grids-item>
          <span slot="text">
              <div class="grids-icon"><icon name="pie-chart" scale="1.5"></icon></div>
              <p>今日毛利{{shopData.todayList.person_profit}}元</p>
          </span>
        </yd-grids-item>
      </yd-grids-group>
      <yd-flexbox class="main-box-flex">
        <yd-flexbox-item>今日实时动态</yd-flexbox-item>
        <yd-flexbox-item>查看实时监控</yd-flexbox-item>
      </yd-flexbox>
      <div class="private-table">
        <table class="table-main" cellpadding="0" cellspacing="0">
          <tr>
            <td class="table-time">时间</td>
            <td class="table-info">毛利</td>
            <td class="table-info">我的毛利</td>
            <td class="table-info">金额</td>
          </tr>
          <tr v-for="item in shopData.tradingList.data">
            <td class="table-time"> {{item.datetime}}</td>
            <td class="table-info"> {{item.totalProfit}}</td>
            <td class="table-info"> {{item.my_profit}}</td>
            <td class="table-info"> {{item.amount}}</td>
          </tr>
        </table>
      </div>
      <yd-infinitescroll :on-infinite="loadList" ref="infinitescrollDemo">
        <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>
        <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg" />
      </yd-infinitescroll>
    </div>
    <yd-popup v-model="showStore" position="right">
      <yd-cell-item v-for="(item,key) in dataList" @click.native="showDetial(key,item)">
        <span slot="left">{{item.name}}</span>
      </yd-cell-item>
    </yd-popup>
    <yd-tabbar slot="tabbar" class="public-footer">
      <yd-tabbar-item title="首页" link="/" active>
        <yd-icon name="home" slot="icon"></yd-icon>
      </yd-tabbar-item>
      <yd-tabbar-item title="投资收益" link="/income">
        <yd-icon name="shopcart-outline" slot="icon"></yd-icon>
      </yd-tabbar-item>
      <yd-tabbar-item title="信息交流" link="/message">
        <yd-icon name="ucenter-outline" slot="icon"></yd-icon>
      </yd-tabbar-item>
      <yd-tabbar-item title="个人中心" link="/user">
        <yd-icon name="ucenter-outline" slot="icon"></yd-icon>
      </yd-tabbar-item>
    </yd-tabbar>
  </div>
</template>
<script>
  import Ajax from "../api/ajax.js"
  import dataURL from "../data/dataURL.js"
  export default {
    data() {
      return {
        page: 1,
        pageSize: 10,
        resDatas: {
          user_name: "",
          invset_count: "",
          invset_amount: "",
          share_amount: "",
          payback_cycle: "",
          payback_percent: "",
          shr_info: {
            name: ""
          },
          avatar: {
            image: ""
          }
        },
        resToday: {
          total_amount: '',// 本店今日营业额
          total_percent: '',// 本店今日毛利率
          stock_right_percent: "", //本人持股数
          person_profit: "" //本人今日毛利
        },
        showListDetail: false,
        showStore: false,
        listDetial: {},
        dataList: [{
          name: ""
        }],
        shopData: {
          name: "",
          shop_id: '',
          todayList: {
            total_amount: '',
            total_percent: '',
            stock_right_percent: '',
            person_profit: ''
          },
          tradingList: {
            data: [
              {
                "sn": "",// 单据序列号
                "datetime": "",// 单据产生的时间，格式为yyyy-MM-dd hh:mm:ss
                "totalAmount": "",// 单据实收总额
                "totalProfit": "", //单据总利润
                "discount": "", // 单据折扣
                "rounding": "", // 抹零数额，比如3.1元收别人3元，0.1就是被抹零数额
                "amount": "", // 支付金额
                "profit_percent": "", // 毛利率
                "my_profit": "" //我的毛利
              }
            ]
          }
        },
        loadBloean: true,
        timer: "",
        defaultItem: 0,
      }
    },
    methods: {
      async loadList(boolean) {
        if (this.shopData.shop_id) {
          if (boolean) {
            this.page=0;
            this.shopData.tradingList.data = [];
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
          }
          let tradingList = await Ajax.Post(dataURL.main.transactionList, {
            shop_id: this.shopData.shop_id,
            page: this.page,
            per_page: this.pageSize
          });
          let _list = tradingList.data;
          console.log(tradingList)
          this.shopData.tradingList.data = [...this.shopData.tradingList.data, ..._list];
          if (_list.length < this.pageSize) {
            /* 所有数据加载完毕 */
            console.info("所有数据加载完毕");
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
            return;
          }
          /* 单次请求数据完毕 */
          this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
          this.page++;
        }
      },
      checkShowList(item) {
        this.showListDetail = true;
        this.listDetial = item;
      },
      // 显示更多店铺
      showMoreStore() {
        this.showStore = true
      },
      // 显示店铺的所有收益信息
      showDetial(key, item) {
        this.defaultItem = key;
        for (let i of this.dataList) {
          if (i.shop_id == item.shop_id) {
            this.shopData = i;
          }
        }
        this.loadBloean = true;
        setTimeout(() => {
          this.showStore = false;
          this.loadBloean = false;
        }, 500);
      },
      // 页面初始化调用
      async getData() {
        let res = await Ajax.Post(dataURL.main.info);
        this.resDatas = res;
        let dataAll = [];
        let shopList = await Ajax.Post(dataURL.main.shopList);
        let param = {};
        for (let item of shopList) {
          let resToday = await Ajax.Post(dataURL.main.todayInfo, { shop_id: item.shop_id });
          let tradingList = await Ajax.Post(dataURL.main.transactionList, {
            shop_id: item.shop_id,
            page: this.page,
            per_page: this.pageSize
          });
          param = {
            name: item.shop_info.name,
            shop_id: item.shop_id,
            todayList: resToday,
            tradingList: tradingList,
          }
          dataAll.push(param);
        }
        this.dataList = dataAll;
        this.shopData = dataAll[this.defaultItem];
        this.loadBloean = false;
        this.page++;
        let _this = this;
        _this.timer = setInterval(function () {
          _this.timeInterval();
          console.log('页面刷新一次')
          clearInterval(_this.timer);
        }, 300000)
      },
      // 开启计时器，每隔一段时间去刷新一次
      async timeInterval() {
        if (!this.shopData.shop_id) {
          return;
        }
        var x = document.body.scrollTop || document.documentElement.scrollTop;
        var timer = setInterval(function () {
          x = x - 100;
          if (x < 100) {
            x = 0;
            window.scrollTo(x, x);
            clearInterval(timer);
          }
          window.scrollTo(x, x);
        }, 10);
        this.loadList(true)
        this.getData();
        // let shop_id = this.shopData.shop_id;
        // let dataAll = [];
        // let shopList = await Ajax.Post(dataURL.main.shopList);
        // let param = {};
        // let resToday = await Ajax.Post(dataURL.main.todayInfo, { shop_id: shop_id });
        // let tradingList = await Ajax.Post(dataURL.main.transactionList, {
        //   shop_id: shop_id,
        //   page: 1,
        //   per_page: this.pageSize
        // });
        // param = {
        //   name: this.shopData.name,
        //   shop_id: shop_id,
        //   todayList: resToday,
        //   tradingList: tradingList
        // }
        // dataAll.push(param);
        // this.dataList = dataAll;
        // console.log(dataAll);
        // this.shopData = dataAll[0];
      },
      // 当投资店铺只有两个的时候
      showItem($event, key, item) {
        let flexbox = document.querySelectorAll(".flex-box-item");
        for (let i of flexbox) {
          i.className = 'flexbox-item flex-box-item';
          $event.target.className = 'flexbox-item flex-box-item active';
        }
        this.showDetial(key, item)
      }
    },
    computed: {
      active() {
        for (let i in this.dataList) {
          if (i == 0) {
            return "active"
          }
        }
      },
      showLoading() {
        if (this.loadBloean) {
          this.$dialog.loading.open('很快加载好了');
        } else {
          this.$dialog.loading.close();
        }
      },
      checkActive() {
        for (let i in this.dataList) {
          if (i == 0) {
            return "active"
          }
        }
      }
    },
    mounted() {
      this.getData();

    }
  }

</script>